<template>
  <div :style="'width:' + (width || 0) + 'px;height:' + (height || 0) + 'px;'">
    <el-amap
      ref="coordinateMap"
      class="coordinateMap"
      :mapStyle="mapStyle"
      :vid="uuid"
      :zoom="zoom"
      :center="center"
      :zooms="zooms"
    >
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="index"
        :position="marker.position"
      ></el-amap-marker>
    </el-amap>
  </div>
</template>

<script>
import { getDataStr, pollingRefresh } from "@/utils/refreshCptData";
export default {
  name: "cpt-coordinate-map",
  title: "坐标地图",
  icon: "el-icon-map-location",
  group: "map",
  props: {
    width: Number,
    height: Number,
    option: Object,
  },
  data() {
    return {
      uuid: "",
      zoom: 23,
      zooms: [13, 18],
      center: [121.539693,31.126667],
      mapStyle: "dark",
      markers:  [
          {
            position: [121.536477,31.126924],
          },
          {
            position:[121.538097,31.126337],
          },
          {
            position: [121.536306,31.127466],
          },
          {
            position:[121.538065,31.127007],
          },
          {
            position: [121.535973,31.125593]
          }
        ],
      events: {
        click: (e) => {
          this.mapClickCallback(e);
        },
      },
    };
  },
  methods: {
    mapClickCallback(e) {
      console.log(e);
    },
    refreshCptData() {
      pollingRefresh(this.uuid, this.option.cptDataForm, this.loadData);
    },
    loadData() {
      getDataStr(this.option.cptDataForm).then((res) => {
        this.markers = res ? JSON.parse(res) : this.markers;
        console.log(this.markers, '经纬度数据')
        if (this.option.attribute.zoom) this.zoom = this.option.attribute.zoom;
        if (this.option.attribute.center)
          this.center = JSON.parse(this.option.attribute.zoom);
        if (this.option.attribute.mapStyle)
          this.mapStyle = this.option.attribute.mapStyle;
        // this.$refs.coordinateMap.$amap.setFitView(this.markers);
      });
    },
  },
  created() {
    this.uuid = require("uuid").v1();
  },
  mounted() {
    this.refreshCptData();
  },
};
</script>

<style scoped>
.coordinateMap {
  width: 100%;
  height: 100%;
}
</style>